<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
	</head>
	<link rel="stylesheet" href="css/common/common.css" />
	<link rel="stylesheet" href="css/style.css" />
	<body>
		<div id="web">
			<!--头部 
				width 995
				height 134
			-->
			<header>
				<div class="top">
					<div class="male">
						<span>全国服务热线：400-000-0000</span>
						<div class="link fr">
							<a href="">设为首页</a>
							<a href="">加入收藏</a>
						</div>
					</div>
				</div>
				<nav>
					<div class="logo">
						<img src="img/images/logo.jpg"/>
					</div>
					<ul class="fr clearfix">
						<li class="active">
							<a href="">
								<p>首页</p>
								<p>Home</p>
							</a>
						</li>
						<li>
							<a href="">
								<p>关于我们</p>
								<p>About</p>
							</a>
						</li>
						<li>
							<a href="">
								<p>产品中心</p>
								<p>Products</p>
							</a>
						</li>
						<li>
							<a href="">
								<p>服务支持</p>
								<p>Service</p>
							</a>
						</li>
						<li>
							<a href="">
								<p>新闻中心</p>
								<p>News</p>
							</a>
						</li>
						<li>
							<a href="">
								<p>在线商店</p>
								<p>Shop</p>
							</a>
						</li>
						<li>
							<a href="">
								<p>联系我们</p>
								<p>Contact Us</p>
							</a>
						</li>
					</ul>
				</nav>
			</header>
			<section>
				<!--轮播图 -->
				<div class="play" id="play">
					<div class="img_play">
						<img src="img/images/play_img.jpg" />
						<img src="img/images/play_img2.jpg" />
						<img src="img/images/play_img3.jpg" />
						<img src="img/images/play_img4.jpg" />
					</div>
					<ul class="clearfix">
						<li class="active"></li>
						<li></li>
						<li></li>
						<li></li>
					</ul>
				</div>
				<!--产品介绍-->
				<div class="product clearfix">
					<div class="new_center fl">
						<div class="new_head">
								<div class="pro_img">
									<img src="img/images/1.jpg"  />
								</div>
								<h3>新闻中心</h3>
								<h3>NEWS.CENTER</h3>
								<span></span>
								<div class="triangle"></div>
						</div>
						<div class="shop">
							<p class="cebit">CeBIT 2015</p>
							<div class="content clearfix">
								<div class="img fl">
									<img src="img/images/center.jpg" />
								</div>
								<div class="text fr">
									<p>创新ICT共建全联接<br />世界德国汉诺威展览<br />中心</p>
									<span>3月16日-20日</span>
								</div>
							</div>
							
						</div>
						
						<div class="message">
							<ul class="ul_text">
								<li>
									<div class="text_logo"></div>
									<p>上海国际智能建筑展览会</p>
								</li>
								<li>
									<div class="text_logo"></div>
									<p>2014德国柏林国际消费类电子产品展览会</p>
								</li>
								<li>
									<div class="text_logo"></div>
									<p>2014中国（贵阳）公告安全防范产品博览会</p>
								</li>
							</ul>
						</div>
					</div>
					<div class="new_pro fl">
						<div class="new_head">
								<div class="pro_img">
									<img src="img/images/2.jpg"  />
								</div>
								<h3>新品发布</h3>
								<h3>NEW.PRODUCTS</h3>
								<span></span>
								<div class="triangle"></div>
						</div>
						<div class="new_shop" id="new_shop">
							<div class="autoplay_img">
								<div class="left">
									<img src="img/images/left.jpg" />
								</div>
								<div class="pro">
									<ul class="clearfix">
										<li><img src="img/images/pro.jpg" /></li>
										<li><img src="img/images/pro2.jpg" /></li>
										<li><img src="img/images/pro3.jpg" /></li>
										<li><img src="img/images/pro4.jpg" /></li>
									</ul>
								</div>
								<div class="right">
									<img src="img/images/right.jpg" />
								</div>
							</div>
								<span>s6213w-y</span>
								<p>海思3518E方案，多码流技术，百万高清</p>
						</div>
					</div>
					<div class="info fl">
						<div class="new_head">
								<div class="pro_img">
									<img src="img/images/3.jpg"  />
								</div>
								<h3>品牌介绍</h3>
								<h3>INFORMATION</h3>
								<span></span>
								<div class="triangle"></div>
						</div>
						<div class="shop">
							<div class="img">
								<img src="img/images/info.jpg" />
							</div>
						</div>
						<div class="doub">
							<div class="double_img">
								<img src="img/images/double.jpg"  />
							</div>
							<p>
								"siepem"品牌是广州市TK科技有限公司<br />&nbsp;&nbsp;推出的自有品牌
							</p>
						</div>
					</div>
				</div>
				<div class="about">
					<h3>关于我们</h3>
					<div class="store">
						<p class="clearfix">
							<span class="fl"></span>
							STORE DISPLAY
							<span class="fr"></span>
						</p>
					</div>
				</div>
			</section>
			<div class="shop_info" id="shop_info">
				<p>
					 广州市TK科技有限公司是领先的监控产品供应商和解决方案服务商，面向全球提供领先的网络视频监控系列产品及专业的行业解决方案。<br />
   TK公司自创立以来, 一直持续加大研发投入和不断致力于技术创新。现拥一批技术尖端的研发团队，创造安防行业众多高品质、高性价比的精品<br />
                                                                           持续为客户创造最大价值。 
				</p>
				<div class="shop_img">	
					<ul class="clearfix">
						<li>
							<div>
								<img src="img/images/shop1.jpg"  />
							</div>
						</li>
						<li>
							<div>
								<img src="img/images/shop2.jpg"  />
							</div>
						</li>
						<li>
							<div>
								<img src="img/images/shop3.jpg"  />
							</div>
						</li>
						<li>
							<div>
								<img src="img/images/shop4.jpg"  />
							</div>
						</li>
						<li>
							<div>
								<img src="img/images/shop5.jpg"  />
							</div>
						</li>
								<li>
							<div>
								<img src="img/images/shop1.jpg"  />
							</div>
						</li>
						<li>
							<div>
								<img src="img/images/shop2.jpg"  />
							</div>
						</li>
						<li>
							<div>
								<img src="img/images/shop3.jpg"  />
							</div>
						</li>
						<li>
							<div>
								<img src="img/images/shop4.jpg"  />
							</div>
						</li>
						<li>
							<div>
								<img src="img/images/shop5.jpg"  />
							</div>
						</li>
					</ul>
				</div>
			</div>
			<footer>
				<div class="call_us">
					<h3>联系我们</h3>
					<div class="store">
						<p class="clearfix">
							<span class="fl"></span>
							STORE DISPLAY
							<span class="fr"></span>
						</p>
					</div>
				</div>
				<div class="footer-top clearfix">
					<div  class="footer-map fl">
						<div class="footer-wei clearfix">
							<div class="wei fl">
								<div>
									<img src="img/images/wei.jpg" />
								</div>
								<p>微信扫一扫</p>
								<p>关注我们相关的信息</p>
							</div>
							<ul class="fr">
								<li>
									<img src="img/images/icon1.jpg" />
									<span>服务热线：400-000-0000</span>
								</li>
								<li>
									<img src="img/images/icon2.jpg" />
									<span>联  系  人：某先生</span>
								</li>
								<li>
									<img src="img/images/icon3.jpg" />
									<span>公司邮箱：www.tk.com</span>
								</li>
								<li>
									<img src="img/images/icon4.jpg" />
									<span>公司传真：000-12345678</span>
								</li>
								<li>
									<img src="img/images/icon5.jpg" />
									<span>邮政编码：467000</span>
								</li>
								<li>
									<img src="img/images/icon6.jpg" />
									<span>公司地址：广州市某某区某某路某号</span>
								</li>
							</ul>
						</div>
						<div class="footer-address">
							<img src="img/images/map.jpg" />
						</div>
					</div>
					<div class="text fr">
						<p>昵称</p>
						<input type="text" />
						<p>联系电话</p>
						<input type="text" />
						<p>电子邮箱</p>
						<input type="text" />
						<p>内容</p>
						<textarea></textarea><br />
						<input type="submit" value="提交" />
					</div>
				</div>
				<div class="footer-nav">
					<div class="call">
						<div>
							<span>关注我们:</span>
							<img src="img/images/QQ.png"  />
						</div>                
						<ul class="clearfix">
							<li><a href="">网站首页</a></li>
							<li><a href="">新闻动态</a></li>
							<li><a href="">关于我们</a></li>
							<li><a href="">团队风采</a></li>
							<li><a href="">联系我们</a></li>
							<li><a href="">在线留言</a></li>
						</ul>
					</div>
					<div class="footer_p">
						<p> ©2015 TK科技有限公司  版权所有沪ICP证13022560号-7 All Rights Reserved</p>
					</div>
				</div>
			</footer>
		</div>
		<script src="js/getStyle.js"></script>
		<script>
			function getClass(parent,aE){
				var arr=[];
				var aResult=parent.getElementsByTagName('*');
				for(var i=0;i<aResult.length;i++){
					if(aResult[i].className==aE){
						arr.push(aResult[i]);
					}
				}
				return arr;
			}
			/*轮播*/
			var oPlay=document.getElementById('play');
			var aImg_play=getClass(oPlay,'img_play')[0];
			var aImg=aImg_play.getElementsByTagName('img');
			var oUl=oPlay.getElementsByTagName('ul')[0];
			var oLi=oUl.getElementsByTagName('li');
			var timer=null;
			var num=0;
			var i=0;
			var j=0;
			function autoPlay(){
				num++;
				if(num>aImg.length-1){
					num=0;
				}
				tab();
			}
			timer=setInterval(autoPlay,4000);
			function tab(){
				for(j=0;j<aImg.length;j++){
					aImg[j].style.opacity=0;
					oLi[j].className='';
				}
				oLi[num].className='active';
				startmove(aImg[num],{opacity:100},3000);
			}
			oPlay.onmouseover=function(){
				clearInterval(timer);
			}
			oPlay.onmouseout=function(){
				timer=setInterval(autoPlay,3000);
			}
			for(i=0;i<oLi.length;i++){
				oLi[i].index=i;
				oLi[i].onclick=function(){
					num=this.index;
					tab();
				}
			}
			/*点击切换*/
			var oNew_shop=document.getElementById('new_shop');
			var oAutoplay_img=getClass(oNew_shop,'autoplay_img')[0];
			var oPro=getClass(oAutoplay_img,'pro')[0];
			var aUl=oPro.getElementsByTagName('ul')[0];
			var aLi=aUl.getElementsByTagName('li');
			var oL=getClass(oAutoplay_img,'left')[0];
			var oR=getClass(oAutoplay_img,'right')[0];
			var number=0;
			oL.onclick=function(){
				
				number--;
				if(number<0){
					number=aLi.length-1;
				}
				startmove(aUl,{marginLeft:-218*number});
			}
			oR.onclick=function(){
				number++;
				if(number>aLi.length-1){
						number=0;
					}
				startmove(aUl,{marginLeft:-218*number});
			}
		function smallCarous(){
				number++;
				if(number>aLi.length-1){
						number=0;
				}
				startmove(aUl,{marginLeft:-218*number});
			}
		var S_timer=setInterval(smallCarous,2000);
		oAutoplay_img.onmouseover=function(){
			clearInterval(S_timer);
		}
		oAutoplay_img.onmouseout=function(){
			S_timer=setInterval(smallCarous,2000);
		}
		
		/*无缝切换*/
		var oShop_info=document.getElementById('shop_info');
		var oShop_img=getClass(oShop_info,'shop_img')[0];
		var oShop_ul=oShop_img.getElementsByTagName('ul')[0];
		var oShop_li=oShop_ul.getElementsByTagName('li');
		var speed=-2;
		function move(){
	        if(oShop_ul.offsetLeft<-(oShop_ul.offsetWidth/2)){//向左滚动，当靠左的图4移出边框时
	          oShop_ul.style.left = 0;
	        }
	        oShop_ul.style.left = oShop_ul.offsetLeft + speed + 'px';
	      }
 
		var Ul_timer=setInterval(move,60);
		oShop_img.onmouseover=function(){
			clearInterval(Ul_timer);
		}
		oShop_img.onmouseout=function(){
			Ul_timer=setInterval(move,60);
		}
		</script>
	</body>
</html>
